<template>
  <div class="flex-center">
    <el-row style="min-width: 1300px;margin-top: 20px" :gutter="20" justify="center">
      <el-col :span="16">
        <div class="box" style="width: 100%;height: 200px;background-color:#5c8fca;padding: 20px">
          <h1 style="color: white">新学期，新开始</h1>
          <p style="font-size: 18px;color: white">欢迎新老同学回到校园！分享你的开学趣事，交流学习经验，认识新朋友。</p>
          <el-button>立即参与</el-button>
        </div>
        <div>
          <div style="display: flex;justify-content: space-between;padding: 10px">
            <h4>热门帖子</h4>
            <el-link>查看全部
              <el-icon>
                <ArrowRight/>
              </el-icon>
            </el-link>
          </div>
          <div>
            <div class="box" v-for="item in postPage.list" style="margin-bottom: 10px">
              <el-row>
                <el-col :span="2">
                  <el-avatar :src="item.avatar"></el-avatar>
                </el-col>
                <el-col :span="20">
                  <h4 align="center" @click="goPostDetail(item.postId)">{{ item.title }}</h4>
                  <p style="font-size: 16px">
                    {{ item.content }}
                  </p>
                  <el-row>
                    <el-col :span="4">
                      {{ item.nickname }}
                    </el-col>
                    <el-col :span="5">
                      <el-text size="small">{{ dateFormat(item.createdTime) }}</el-text>
                    </el-col>
                    <el-col :offset="10" :span="2">
                      <el-space :size="4">
                        <el-icon>
                          <IconLike></IconLike>
                        </el-icon>
                        <span style="font-size: 13px;font-weight: 300">{{ item.likes }}</span>
                      </el-space>
                    </el-col>
                    <el-col :span="2">
                      <el-space :size="4">
                        <el-icon>
                          <ChatDotRound/>
                        </el-icon>
                        <span style="font-size: 13px;font-weight: 300">{{ item.likes }}</span>
                      </el-space>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div>
          <el-input style="width: 100%;height: 50px;" type="primary" suffix-icon="Search" @keyup.enter="searchPost" class="search-input" v-model="searchKeyword" placeholder="搜索帖子"></el-input>
        </div>
        <el-card style="margin-top: 20px">
          <template #header>
            <div style="display: flex;justify-content: space-between">
              <el-space>
                <el-icon>
                  <Menu/>
                </el-icon>
                <span>分类</span>
              </el-space>
              <el-link @click="goForumCategory(0)">更多
                <el-icon>
                  <ArrowRight/>
                </el-icon>
              </el-link>
            </div>
          </template>
          <el-row>
            <el-col :span="12" v-for="item in postCategoryTreeList" @click="goForumCategory(item.categoryId)">
              <el-space>
                <el-icon :size="30">
                  <el-image :src="item.icon"></el-image>
                </el-icon>
                <el-link size="large">{{ item.name }}</el-link>
              </el-space>
            </el-col>
          </el-row>
        </el-card>
        <el-card>
          <template #header>
            <div class="flex-between">
              <el-space>
                <el-icon>
                  <Menu/>
                </el-icon>
                <span>热门贴吧</span>
              </el-space>
              <el-link @click="goBardList(0)">更多
                <el-icon>
                  <ArrowRight/>
                </el-icon>
              </el-link>
            </div>
          </template>
          <el-row v-for="item in bardlist" style="margin-bottom: 10px" class="box">
            <el-col :span="4">
              <el-avatar :src="item.cover"></el-avatar>
            </el-col>
            <el-col :span="12">
              <el-link @click="goBardDetail(item.bardId)">{{ item.bardName }}</el-link>
              <br>
            </el-col>
            <el-col :offset="2" :span="6">
              <el-button icon="Plus" round @click="folllowBard(item.bardId)" v-if="!item.isFollow">关注</el-button>
              <el-button icon="Plus" round disabled  v-else>已关注</el-button>
            </el-col>
          </el-row>
        </el-card>
        <el-card>
          <template #header>
            <el-space>
              <el-icon>
                <UserFilled/>
              </el-icon>
              <span>活跃用户</span>
            </el-space>
          </template>
          <el-row v-for="item in forumUserPage.list" style="margin-bottom: 10px" class="box">
            <el-col :span="4">
              <el-avatar :src="item.avatar"></el-avatar>
            </el-col>
            <el-col :span="12">
              <el-text size="large">{{ item.nickname }}</el-text>
              <br>
              <el-text size="small">用户发布了{{ item.postCount }}篇帖子</el-text>
            </el-col>
            <el-col :offset="2" :span="6">
              <el-button icon="Plus" round @click="userFollow(item.userId)" v-if="!item.isFollow">关注</el-button>
              <el-button icon="Plus" round disabled v-else>已关注</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import {ref, reactive, onMounted, watch} from "vue";
import {useRouter} from "vue-router";
import {ArrowRight, ChatDotRound} from "@element-plus/icons-vue";
import {reqFollowBard, reqGetBardVOPage} from "@/api/social/bard";
import {reqGetPostPage, reqGetPostCategoryList, reqGetPostCategoryTreeList,} from "@/api/social/posts";
import type {SocBard} from "@/api/social/bard/type";
import type {SocPost, SocPostItemVO, SocPostCategory} from "@/api/social/posts/type";
import {dateFormat} from "@/utils/timeutil";
import {useUserStore} from "@/stores/user";
import {isImageFileType} from "@/utils/file";
import {reqGetForumUerInfoPage} from "@/api/social/forum/user";
import {reqUserFollow} from "@/api/front/user";

const router = useRouter();
const userStore = useUserStore();
let bardQueryDTO = reactive({
  pageNum: 1,
  pageSize: 5,
  total: 0,
});
let searchKeyword=ref('')
let postQueryDTO = reactive({
  pageNum: 1,
  pageSize: 5,
  keyword: '',
  orderBy: "default"
});
let postCategoryList = ref<SocPostCategory[]>([]);
let postCategoryTreeList = ref<SocPostCategory[]>([]);
let tab = ref("one");
let loading = ref(true);
let bardlist = ref<SocBard[]>([]);
let forumUserPage = reactive({
  list: [],
  pageNum: 0,
  total: 0,
});
let postPage = reactive({
  list: [] as SocPostItemVO[],
  pageNum: 0,
  total: 0,
});
let total = ref<number>(0);

let searchPost=()=>{
  router.push({
    name: 'forum-search',
    query: {
      keyword: searchKeyword.value
    }
  })
}
function getBardList() {
  reqGetBardVOPage(bardQueryDTO).then((res) => {
    bardlist.value = res.data.list;
    bardQueryDTO.total = res.data.total;
  });
}

let goForumCategory = (categoryId) => {
  router.push({
    name: 'forum-search',
    query: {
      categoryId: categoryId
    }
  });
}
let getForumUserPage = async () => {
  let res = await reqGetForumUerInfoPage({
    pageNum: 1,
    pageSize: 5,
    sortBy: ''
  })
  Object.assign(forumUserPage, res.data)
}

let getPostCategoryTreeList = () => {
  reqGetPostCategoryTreeList().then((res) => {
    postCategoryTreeList.value = res.data
  });
};
let folllowBard = (bardId: string) => {
  reqFollowBard({bardId}).then((res) => {
    router.push({
      name: 'bard-detail',
      query: {
        bardId
      },
    })
  });
};
let goBardList = () => {
  router.push({
    name: 'bard-list',
  });
}

function goBardDetail(bardId: string) {
  router.push({
    name: 'bard-detail',
    query: {
      bardId
    },
  });
}
let userFollow=(userId)=>{
  reqUserFollow({followingId:userId})
}
function getPostList() {
  loading.value = true;
  reqGetPostPage(postQueryDTO).then((res) => {
    postPage.list = res.data.list;
    postPage.total = res.data.total;
    loading.value = false;
  });
}

let getPostCategoryList = () => {
  reqGetPostCategoryList().then((res) => {
    postCategoryList.value = res.data
  });
};

let goPostDetail = (postId: string) => {
  router.push({
    name: "post-detail",
    query: {
      postId,
    },
  });
};
onMounted(() => {
  getBardList();
  getPostList();
  getPostCategoryList()
  getPostCategoryTreeList()
  getForumUserPage()
});
watch([() => postQueryDTO.orderBy, () => postQueryDTO.pageNum], () => {
  getPostList()
})
</script>

<style scoped>
.cate-list {
  padding: 5px;
}

.cate-list:hover {
  background-color: #49aaee;
  color: #FFFFFF;
}
</style>
